import Vue from 'vue'
import VueRouter from 'vue-router'
// import Login from '../components/Login.vue'
//@表示src目录
import Login from '@/components/Login.vue'
import Home from '../components/Home.vue'
import Welcome from '../components/Welcome.vue'
import Users from '../components/user/Users.vue'


Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: Login },
  {
    path: '/home',
    component: Home,
    // redirect: '/welcome',
    children: [
      { path: '/welcome', component: Welcome },
      { path: '/users', component: Users }

    ]
  }
]

const router = new VueRouter({
  routes
})

//挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数，表示放行
  //     next()  放行    next('/login')  强制跳转
  //判断用户访问的是否是login
  //如果是login 放行并添加return终止后续代码的执行
  if (to.path === '/login') { return next() }
  //如果访问的不是login页面 就要判断是否在本地有token值
  const tokenStr = window.sessionStorage.getItem('token');
  //如果没有token就让他重定向到login
  if (!tokenStr) { return next('/login') }
  //如果有放行
  next()

})

//导航守卫和axios拦截器有区别吗？
//答：导航首位用来控制页面跳转（不管编程式还是声明式）
//而axios的请求拦截器只是拦截axios发起的请求（axios发起的接口请求）

export default router
